<template>
	<view class="cart-container min-height-100vh">
		<JNavBar title="购物车">
			<template v-slot:right>
				<view class="clear-cart" @click="clearCart">
					<uv-icon name="trash" color="#fff" size="40rpx"></uv-icon>
					<text>清空购物车</text>
				</view>
			</template>
		</JNavBar>

		<!-- 取货方式选择区域 -->
		<view class="pickup-section" v-if="cartList.length > 0">
			<!-- 取货方式 -->
			<view class="pickup-item">
				<text class="label">取货方式:</text>
				<view class="method-btn active">上门自提</view>
			</view>

			<view class="pickup-item" @click="selectPickupPoint">
				<text class="label">自提点:</text>
			</view>
		</view>

		<!-- 购物车商品列表 -->
		<JCartList :cartList="cartList" @update-item="updateCartItem" @delete-item="deleteItem" @go-shopping="goShopping"></JCartList>

		<!-- 底部结算区域 -->
		<JCheckoutBar
			:show="cartList.length > 0"
			:itemCount="totalItems"
			:totalPrice="totalPrice"
			:showSecondary="true"
			@details-click="showDetails"
			@primary-click="checkout"
		></JCheckoutBar>

		<uv-popup ref="popup" @change="change" :safeAreaInsetBottom="true" round="10rpx" custom-style="min-height: 200rpx;">
			<view class="detail-box">
				<view class="head">
					<text class="title">金额明细</text>
					<!-- <text class="desc">金额明细</text> -->
				</view>
				<view class="body">
					<view class="desc-item">
						<view class="label">商品金额</view>
						<text class="value">￥{{ totalPrice }}</text>
					</view>
					<view class="desc-item">
						<view class="label">代采费</view>
						<text class="value"></text>
					</view>
					<view class="desc-item">
						<view class="label">运费</view>
						<text class="value"></text>
					</view>

					<view class="desc-item">
						<view class="label">结算手续费</view>
						<text class="value"></text>
					</view>
				</view>
				<view class="foot">
					<!-- 底部结算区域 -->
					<JCheckoutBar
						:show="cartList.length > 0"
						:itemCount="totalItems"
						:totalPrice="totalPrice"
						:showSecondary="true"
						@details-click="closeDetails"
						@primary-click="checkout"
					></JCheckoutBar>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			selectedPickupPoint: {
				name: '高碑店仓(李航)'
			},
			cartList: [
				{
					id: 1,
					image: 'https://picsum.photos/300/300?random=1',
					title: '【高碑店】河北一级榴莲蜜薯3斤(板栗薯)袋3-8两',
					stock: 2581,
					minOrder: 10,
					multiplier: 1,
					limit: 300,
					spec: '净重约3.00斤 | 约¥1.27/斤',
					price: '3.80',
					quantity: 10
				},
				{
					id: 2,
					image: 'https://picsum.photos/300/300?random=2',
					title: '【高碑店】【六和】鸡肝1袋*2.00斤',
					stock: 12,
					minOrder: 12,
					multiplier: 12,
					limit: null,
					spec: '净重约2.00斤 | 约¥1.25/斤',
					price: '2.50',
					quantity: 12
				},
				{
					id: 3,
					image: 'https://picsum.photos/300/300?random=3',
					title: '【高碑店】【阳谷】一级散养青脚大公鸡/纯干/净膛/4只1箱*9千克',
					stock: 36,
					minOrder: null,
					multiplier: 1,
					limit: null,
					spec: '净重约17.00斤 | 约¥7.82/斤',
					price: '133.00',
					quantity: 1
				},
				{
					id: 4,
					image: 'https://picsum.photos/300/300?random=4',
					title: '【高碑店】新鲜有机蔬菜礼盒装 时令蔬菜组合装',
					stock: 156,
					minOrder: 5,
					multiplier: 1,
					limit: 50,
					spec: '净重约2.5斤 | 约¥8.50/斤',
					price: '21.25',
					quantity: 3
				},
				{
					id: 5,
					image: 'https://picsum.photos/300/300?random=5',
					title: '【高碑店】优质大米 东北五常大米 10kg装',
					stock: 89,
					minOrder: 1,
					multiplier: 1,
					limit: 20,
					spec: '净重10kg | 约¥6.80/kg',
					price: '68.00',
					quantity: 2
				},
				{
					id: 6,
					image: 'https://picsum.photos/300/300?random=6',
					title: '【高碑店】新鲜牛肉 澳洲进口牛肉 500g装',
					stock: 45,
					minOrder: 2,
					multiplier: 2,
					limit: 10,
					spec: '净重500g | 约¥45.00/500g',
					price: '45.00',
					quantity: 4
				},
				{
					id: 7,
					image: 'https://picsum.photos/300/300?random=7',
					title: '【高碑店】新鲜水果 进口车厘子 2kg装',
					stock: 78,
					minOrder: 1,
					multiplier: 1,
					limit: 15,
					spec: '净重2kg | 约¥35.00/kg',
					price: '70.00',
					quantity: 1
				},
				{
					id: 8,
					image: 'https://picsum.photos/300/300?random=8',
					title: '【高碑店】海鲜礼盒 新鲜大闸蟹 8只装',
					stock: 23,
					minOrder: 1,
					multiplier: 1,
					limit: 5,
					spec: '净重约1.5kg | 约¥66.67/kg',
					price: '100.00',
					quantity: 1
				}
			]
		};
	},
	computed: {
		totalItems() {
			return this.cartList.reduce((total, item) => total + item.quantity, 0);
		},
		totalPrice() {
			return this.cartList
				.reduce((total, item) => {
					return total + parseFloat(item.price) * item.quantity;
				}, 0)
				.toFixed(2);
		}
	},
	methods: {
		// 选择自提点
		selectPickupPoint() {
			uni.showActionSheet({
				itemList: ['高碑店仓(李航)', '朝阳仓(王明)', '海淀仓(张华)'],
				success: (res) => {
					const points = ['高碑店仓(李航)', '朝阳仓(王明)', '海淀仓(张华)'];
					this.selectedPickupPoint.name = points[res.tapIndex];
				}
			});
		},

		// 更新购物车商品
		updateCartItem(index, newItem) {
			this.$set(this.cartList, index, newItem);
			console.log(123);
		},

		// 增加数量（保留兼容性）
		increaseQuantity(index) {
			const item = this.cartList[index];
			if (item.limit && item.quantity >= item.limit) return;
			item.quantity++;
		},

		// 减少数量（保留兼容性）
		decreaseQuantity(index) {
			const item = this.cartList[index];
			if (item.quantity <= item.minOrder) return;
			item.quantity--;
		},

		// 删除商品
		deleteItem(index) {
			uni.showModal({
				title: '确定要删除这个商品吗？',
				success: (res) => {
					if (res.confirm) {
						this.cartList.splice(index, 1);
					}
				}
			});
		},

		// 显示明细
		showDetails() {
			this.$refs.popup.open('bottom');
		},
		closeDetails() {
			this.$refs.popup.close();
		},
		// 找人代付
		findSomeoneToPay() {
			uni.showToast({
				title: '找人代付功能开发中',
				icon: 'none'
			});
		},

		// 结算下单
		checkout() {
			if (this.cartList.length === 0) {
				uni.showToast({
					title: '购物车为空',
					icon: 'none'
				});
				return;
			}

			uni.showToast({
				title: '跳转到结算页面',
				icon: 'none'
			});
		},

		// 去逛逛
		goShopping() {
			uni.switchTab({
				url: '/pages/index/index'
			});
		},

		// 清空购物车
		clearCart() {
			if (this.cartList.length === 0) {
				uni.showToast({
					title: '购物车已为空',
					icon: 'none'
				});
				return;
			}

			uni.showModal({
				title: '确定要清空购物车吗？',
				success: (res) => {
					if (res.confirm) {
						this.cartList = [];
						uni.showToast({
							title: '购物车已清空',
							icon: 'success'
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="less">
page {
	background-color: #f5f5f5;
}
.detail-box {
	padding-bottom: var(--window-bottom);
	.head {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		height: 110rpx;
		padding: 0 20rpx;
		background: #fff;
		border-bottom: 1px solid #f0f0f0;
		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
		.desc {
			font-size: 28rpx;
			color: #999;
		}
	}
	.body {
		padding: 10rpx 20rpx;
		.desc-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;
			border-bottom: 1px solid #f0f0f0;
			.label {
				width: 150rpx;
				font-size: 28rpx;
				color: #000;
				margin-right: 20rpx;
			}
			.value {
				font-size: 28rpx;
				color: @pricecolor;
			}
		}
		.desc-item:last-child {
			border-bottom: none;
		}
	}
	.foot {
		/* 底部区域样式 */
	}
}
.clear-cart {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	height: 80rpx;
	font-size: 28rpx;
	color: #fff;
	flex: 1;
}
.cart-container {
	/* 高度通过通用CSS类控制 */
	background-color: #f5f5f5;
}

// 取货方式选择区域
.pickup-section {
	background: #fff;
	margin-bottom: 10rpx;
	.pickup-item {
		border-bottom: 1px solid #f0f0f0;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		height: 100rpx;
		.label {
			width: 150rpx;
			font-size: 28rpx;
			color: #333;
			margin-right: 20rpx;
		}

		.method-btn {
			padding: 10rpx 20rpx;
			background: @basecolor;
			color: #fff;
			border-radius: 6rpx;
			font-size: 26rpx;
			&.active {
				background: @basecolor;
			}
		}
	}
}
</style>
